<template>
  <el-form :model="vlanSpec" ref="ruleForm" label-width="100px" class="config_form">
    <el-form-item label="类型">
      <el-select v-model="vlanSpec.vlanType" clearable
                 placeholder="请选择Vlan类型">
        <el-option label="c-tag" value="c-tag"></el-option>
        <el-option label="s-tag" value="s-tag"></el-option>
        <el-option label="un-tag" value="un-tag"></el-option>
        <el-option label="unknown" value="unknown"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="id">
      <el-select v-model="vlanSpec.vlanId" multiple
                 placeholder="请选择VlanID">
        <el-option
            v-for="(id,index) in vlanId"
            :key="index"
            :value="id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="优先级">
      <el-select v-model="vlanSpec.vlanPriority" clearable
                 placeholder="请选择优先级">
        <el-option
            v-for="(i,index) in xc_vlanPriority"
            :key="index"
            :value="i">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="访问操作">
      <el-select v-model="vlanSpec.accessAction" clearable
                 placeholder="请选择访问操作">
        <el-option
            v-for="(i,index) in xc_accessAction"
            :key="index"
            :value="i">
        </el-option>
      </el-select>
    </el-form-item>

<!--    <el-form-item>-->
<!--      <el-image-->
<!--          style="width: 20px; height: 25px;"-->
<!--          :src="require('@/assets/union_rule_font.jpg')"-->
<!--          :preview-src-list="[require('@/assets/union/ethPtpPac.jpg')]">-->
<!--      </el-image>-->
<!--      <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>-->
<!--      <el-button @click="resetForm('ruleForm')">重置</el-button>-->
<!--    </el-form-item>-->
  </el-form>
</template>

<script>
import {xc_accessAction, xc_vlanPriority} from "@/assets/config/XcPac";

export default {
  name: "Vlan",
  data() {
    return {
      vlanId: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      xc_vlanPriority,
      xc_accessAction,
      vlanSpec: {
        vlanType: '',
        vlanId: [],
        vlanPriority: '',
        accessAction: ''
      },
    }
  }
}
</script>

<style>
.el-form-item .el-select {
  width: 100%;
}
</style>